<template>
  <div class="user">
    <div class="common-form">新增活动会场</div>
    <div class="product-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-form-item label="活动标题" prop="name" :rules="[{ required: true, message: ' ' }]">
          <el-input type="text" v-model="form.name" placeholder="请输入活动标题" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="背景图" prop="image_id">
          <el-row>
            <el-button type="primary" @click="openUpload('image')">选择图片</el-button>
            <div v-if="form.imageId != ''" class="img"><img :src="filePath" width="100" height="100" /></div>
          </el-row>
        </el-form-item>
        <el-form-item label="分享标题" prop="shareTitle" :rules="[{ required: true, message: ' ' }]">
          <el-input type="text" v-model="form.shareTitle" placeholder="请输入分享标题" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="分享内容" prop="shareDesc" :rules="[{ required: true, message: ' ' }]">
          <el-input type="text" v-model="form.shareDesc" placeholder="请输入分享内容" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="分享图" prop="shareImageId">
          <el-row>
            <el-button type="primary" @click="openUpload('share')">选择图片</el-button>
            <div v-if="form.shareImageId != ''" class="img"><img :src="shareFilePath" width="100" height="100" /></div>
          </el-row>
        </el-form-item>
        <el-form-item label="活动时间" :rules="[{ required: true, message: ' ' }]" prop="startTime">
          <el-date-picker v-model="form.startTime" type="date" value-format="YYYY-MM-DD" placeholder="选择开始日期"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="form.endTime" type="date" value-format="YYYY-MM-DD" placeholder="选择结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="个人中心状态">
          <div>
            <el-radio v-model="form.isShow" :label="1">显示</el-radio>
            <el-radio v-model="form.isShow" :label="0">隐藏</el-radio>
          </div>
        </el-form-item>
        <div class="common-form">邀请成功的条件</div>
        <el-form-item label="邀请成功的条件 ">
          <el-radio v-model="form.invCondition" :label="0">邀请成为会员</el-radio>
          <el-radio v-model="form.invCondition" :label="1">邀请成为会员且消费</el-radio>
        </el-form-item>
        <div class="common-form">礼品设置</div>
        <div v-for="(item, reward_index) in rewardData" :key="reward_index" class="mt16">
          <div>
            <span style="font-weight: 900;">奖项{{ reward_index + 1 }}:</span>
            <span>每邀请</span>
            <el-input type="number" v-model="item.invitationNum" size="small" style="width: 100px;"></el-input>
            <span>人获得礼品</span>
            <el-checkbox v-model="item.isBalance" class="pl16">余额</el-checkbox>
            <el-input type="number" v-model="item.balance" size="small" style="width: 100px;"></el-input>
            <el-checkbox v-model="item.isPoint" class="pl16">积分</el-checkbox>
            <el-input type="number" v-model="item.point" size="small" style="width: 100px;"></el-input>
            <el-checkbox v-model="item.isCoupon" class="pl16">优惠券</el-checkbox>
            <el-input type="text" v-model="item.couponName" size="small" disabled="true" style="width: 200px;"></el-input>
            <el-button type="primary" size="small" @click="addCoupon(reward_index)">选择优惠券</el-button>
            <el-link type="primary" @click="delReward(reward_index)" style="float:right;">删除</el-link>
          </div>
        </div>
        <div style="padding:10px 20px 20px 40px;"><el-link type="primary" @click="addInv">添加奖励项</el-link></div>
      </el-form>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="info" @click="gotoBack">返回</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </div>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
    <!--选择优惠券-->
    <GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeProductDialogFunc($event)">选择优惠券弹出层</GetCoupon>
  </div>
</template>
<script>
import InvitationGiftApi from '@/api/invitationgift.js';
import GetCoupon from '@/components/coupon/GetCoupon.vue';
import Upload from '@/components/file/Upload.vue';
export default {
  components: {
    /*选择优惠券件*/
    GetCoupon,
    Upload
  },
  data() {
    return {
      form: {
        name: '',
        invCondition: '0',
        startTime: '',
        endTime: '',
        imageId: '',
        isShow: 1,
        shareImageId: '',
        shareTitle: '',
        shareDesc: ''
      },
      /*优惠券*/
      tableData: [],
      loading: false,
      open_add: false,
      /*奖励列表*/
      rewardData: [],
      coupon_index: 0,
      file_path: '',
      /*是否打开图片选择*/
      isupload: false,
      shareFilePath: '',
      formRules: {
        imageId: [
          {
            required: true,
            message: '请上传背景图',
            trigger: 'blur'
          }
        ],
        shareImageId: [
          {
            required: true,
            message: '请上传分享图',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    /*获取数据*/
    this.getData();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      let invitationGiftId = self.$route.query.invitationGiftId;
      InvitationGiftApi.getInvitation(
        {
          invitationGiftId: invitationGiftId
        },
        true
      )
        .then(res => {
          self.form = res.data;
          self.rewardData = res.data.reward;
          self.filePath = res.data.filePath;
          self.shareFilePath = res.data.shareFilePath;
        })
        .catch(error => {
          self.loading = false;
        });
    },
    /*添加奖励*/
    addInv() {
      let obj = {
        invitationNum: 1,
        isCoupon: false,
        point: 0,
        isPoint: false,
        couponIds: '',
        couponName: '',
        isBalance: false,
        balance: ''
      };
      this.rewardData.push(obj);
    },
    /*添加优惠券*/
    addCoupon(reward_index) {
      this.open_add = true;
      this.coupon_index = reward_index;
    },

    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      let self = this;
      let index = self.coupon_index;
      self.open_add = e.openDialog;
      let n = self.rewardData[index].couponName.indexOf(e.params.name);
      if (n == -1) {
        self.rewardData[index].couponIds += e.params.couponId + ',';
        if (self.rewardData[index].couponName == '') {
          self.rewardData[index].couponName += e.params.name;
        } else {
          self.rewardData[index].couponName += ',' + e.params.name;
        }
      } else {
        ElMessage .error('请勿重复添加');
      }
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      if (self.rewardData.length == 0) {
        ElMessage .error('请添加奖项');
        return;
      }
      let form = self.form;
      form.rewardData = self.rewardData;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          InvitationGiftApi.editInvitation(form, true)
            .then(data => {
              self.loading = false;
              if (data.code == 1) {
                ElMessage ({
                  message: data.msg,
                  type: 'success'
                });
                self.$router.push('/plus/invitation/index');
              } else {
                self.loading = false;
              }
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },
    /*返回上一页面*/
    gotoBack() {
      this.$router.back(-1);
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == 'image') {
          this.filePath = e[0].filePath;
          this.form.imageId = e[0].fileId;
        } else if (this.type == 'share') {
          this.shareFilePath = e[0].filePath;
          this.form.shareImageId = e[0].fileId;
        }
      }
      this.isupload = false;
    },
    delReward(index) {
      this.rewardData.splice(index, 1);
    }
  }
};
</script>
